<template>
  <el-scrollbar>
    <div :class="{ hidden: hidden }" class="pagination">
      <el-pagination
        v-model:current-page="localPageData.currentPage"
        v-model:page-size="localPageData.pageSize"
        :background="background"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="localPageData.total"
        size="small"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { PageDataModel } from "@/model/page-data-model";

const props = defineProps({
  pageData: {
    require: true,
    type: Object as PropType<PageDataModel<any>>,
    default() {
      return PageDataModel.empty();
    },
  },

  pageSizes: {
    type: Array as PropType<number[]>,
    default() {
      return [10, 20, 30, 50];
    },
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },

  background: {
    type: Boolean,
    default: true,
  },

  autoScroll: {
    type: Boolean,
    default: true,
  },

  hidden: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["pagination"]);

// 创建一个本地副本来管理分页数据
const localPageData = ref({ ...props.pageData });

function handleSizeChange(val: number) {
  localPageData.value.pageSize = val;
  emit("pagination", localPageData.value);
}

function handleCurrentChange(val: number) {
  localPageData.value.currentPage = val;
  emit("pagination", localPageData.value);
}
</script>

<style lang="scss" scoped>
.pagination {
  padding: 12px;

  &.hidden {
    display: none;
  }
}
</style>
